---
type: integration
title: '@astrojs/alpinejs'
description: '@astrojs/alpinejsインテグレーションを使用して、Astroプロジェクトのコンポーネントサポートを拡張する方法を学びます。'
sidebar:
  label: Alpine.js
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs/'
category: renderer
i18nReady: false
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

この[**Astroインテグレーション**][astro-integration]は、[Alpine.js](https://alpinejs.dev/)をプロジェクトに追加し、ページのどこでもAlpine.jsを使用できるようにします。

## インストール

Astroには、公式インテグレーションのセットアップを自動化する`astro add`コマンドが含まれています。もしよろしければ、[手動でインテグレーションをインストールする](#手動インストール)こともできます。

`@astrojs/alpinejs`をインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

問題が発生した場合は、[GitHubで報告してください](https://github.com/withastro/astro/issues)。そして、以下の手動インストール手順を試してください。

### 手動インストール

まず、`@astrojs/alpinejs`パッケージをインストールします。

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。しかし、Astroの起動時に`Cannot find package 'alpinejs'`（または同様の）警告が表示される場合は、Alpine.jsを自分で手動でインストールする必要があります。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install alpinejs @types/alpinejs
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add alpinejs @types/alpinejs
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add alpinejs @types/alpinejs
  ```
  </Fragment>
</PackageManagerTabs>

次に、`integrations`プロパティを使用して、インテグレーションを`astro.config.*`ファイルに適用します。

```js ins="alpinejs()" title="astro.config.mjs" ins={2}
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpinejs()],
});
```

## 設定オプション

### `entrypoint`

`entrypoint`オプションをルートからの相対的なインポート指定子（例えば、`entrypoint: "/src/entrypoint"`）に設定することで、Alpineを拡張できます。

このファイルのデフォルトエクスポートは、開始前にAlpineインスタンスを受け入れる関数である必要があります。これにより、高度なユースケースのためにカスタムディレクティブ、プラグイン、およびその他のカスタマイズを使用できます。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine({ entrypoint: '/src/entrypoint' })],
});
```

```js title="src/entrypoint.ts"
import type { Alpine } from 'alpinejs'
import intersect from '@alpinejs/intersect'

export default (Alpine: Alpine) => {
    Alpine.plugin(intersect)
}
```

## 使い方

インテグレーションがインストールされると、Astroコンポーネント内で[Alpine.js](https://alpinejs.dev/)のディレクティブと構文を使用できます。Alpine.jsスクリプトは自動的に追加され、ウェブサイトのすべてのページで有効になるため、クライアントディレクティブは必要ありません。プラグインスクリプトをページの`<head>`に追加します。

次の例では、[AlpineのCollapseプラグイン](https://alpinejs.dev/plugins/collapse)を追加して、段落テキストを展開および折りたたみます。

```astro title="src/pages/index.astro" ins={6} ins="x-collapse"
---
---
<html>
	<head>
		<!-- ... -->
		<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
	</head>
	<body>
    <!-- ... -->
		<div x-data="{ expanded: false }">
			<button @click="expanded = ! expanded">Toggle Content</button>

			<p id="foo" x-show="expanded" x-collapse>
        Lorem ipsum
			</p>
		</div>
	</body>
</html>
```

## TypeScriptのインテリセンス

`@astrojs/alpine`インテグレーションは、グローバルウィンドウオブジェクトに`Alpine`を追加します。IDEのオートコンプリートのために、`src/env.d.ts`に以下を追加します。

```ts title="src/env.d.ts"
interface Window {
  Alpine: import('alpinejs').Alpine;
}
```

## 例

* [Astro Alpine.jsの例](https://github.com/withastro/astro/tree/main/examples/framework-alpine)は、AstroプロジェクトでAlpine.jsを使用する方法を示しています。

[astro-integration]: /ja/guides/integrations-guide/

[astro-ui-frameworks]: /ja/guides/framework-components/#using-framework-components
